<template>
  <div class="sys-main-content">
    <div class="col-content">
      <div class="sys-search">
        <el-input v-model="searchForm.userName" placeholder="请输入用户名" clearable />
        <el-select v-model="searchForm.status" clearable @change="init">
          <el-option :value="0" label="成功"></el-option>
          <el-option :value="1" label="失败"></el-option>
        </el-select>
        <el-date-picker
          v-model="searchForm.createTime"
          value-format="timestamp"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
      </div>
      <div class="sys-table">
        <el-table :data="tableData">
          <el-table-column label="用户名" prop="userName" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="状态" prop="status" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag :type="scope.row.status===0?'success':'danger'">{{ scope.row.status===0?'成功':'失败' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="IP地址" prop="ipAddress" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="类型" prop="eventContent" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="浏览器" prop="browserName" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="设备名称" prop="deviceName" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="用户代理" prop="userAgent" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="耗时/s" prop="elapsedTime" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="请求路径" prop="requestUri" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="异常信息" prop="exception" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.status===1" @click="openError(scope.row)">点击查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <div class="sys-pagination">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <error-dialog ref="ErrorDialog" v-if="ErrorDialogVisible"></error-dialog>
  </div>
</template>

<script>
import { queryLog } from '@/api/deploy'
import ErrorDialog from './errorDialog'
export default {
  name: 'LogIndex',
  components: { ErrorDialog },
  data() {
    return {
      ErrorDialogVisible: false,
      totalCount: 0,
      tableData: [],
      currentPage: 1,
      pageSize: 6,
      searchForm: {
        userName: '',
        createTime: [],
        status: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    openError(row) {
      this.ErrorDialogVisible = true
      this.$nextTick(() => {
        this.$refs.ErrorDialog.dialogVisible = true
        this.$refs.ErrorDialog.init(row)
      })
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.init()
    },
    init() {
      queryLog({
        current: this.currentPage,
        size: this.pageSize,
        userName: this.searchForm.userName,
        status: this.searchForm.status,
        startTime: this.searchForm.createTime !== null ? this.searchForm.createTime[0] : '',
        endTime: this.searchForm.createTime !== null ? this.searchForm.createTime[1] : ''
      }).then((r) => {
        this.tableData = r.list
        this.totalCount = r.totalCount
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  height: calc(100vh - 100px);
  .el-col {
    height: 100%;
  }
}
.col-content {
  height: calc(100vh - 100px)
}
</style>
